import React, { Component } from "react";
import Images from "../../components/Images";
import Mark from "../../components/Mark";
import Header from "../../components/Header";
import Title from "../../components/Title";
import Link from "../../components/Link";
import Operate from "../../components/Operate";
import PageNav from "../../components/PageNav";

import Axios from "axios";
class View extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      setPageCfg: {
        currentPage: 1,
        totalPage: 5,
      },
    };
    this.getFn = this.getFn.bind(this);
  }
  getFn(pageNumber = 1) {
    Axios.get("/api/feeds", {
      params: {
        page: pageNumber,
      },
    }).then((res) => {
      console.log(res.data);
      const { list } = this.state;
      this.setState({
        list: res.data.data.feeds,
        setPageCfg: {
          currentPage: pageNumber,
          totalPage: Math.ceil(res.data.data.count / 10),
        },
      });
      console.log(list);
    });
  }
  componentDidMount() {
    this.getFn(1);
  }
  listMap(list) {
    console.log(list);
    return (
      list.length !== 0 &&
      list.map((item, index) => {
        return (
          <div className="news" key={item.id}>
            <Images images={item.imgUrl} />
            <div className="detail">
              <Mark mark={item.topicName} />
              <Title title={item.title} />
              <Link link={item.domain} />
              <Operate
                image={
                  require("../../images/F00E84B6EF64C7A69547CB3FE16560E9.jpg")
                    .default
                }
                name={item.submittedUser.nick}
                time="17分钟前"
                recommendNum="6"
                commentNum="3"
              />
            </div>
          </div>
        );
      })
    );
  }
  render() {
    let { list, setPageCfg } = this.state;

    console.log(list);
    return (
      <div>
        <Header />
        <main>{this.listMap(list)}</main>
        {list.length !== 0 ? (
          <PageNav
            onChange={this.getFn}
            defaultCurrent={setPageCfg.currentPage}
            pageUrl="test1"
            total={setPageCfg.totalPage}
          />
        ) : (
          ""
        )}
      </div>
    );
  }
}
export default View;
